<template>
  <div class="entity-body">
    <div class="custom-header" :style="bodyStyle">
      <slot-header />
    </div>
    <div class="custom-content" :style="bodyStyle">
      <div class="custom-body" :loading="loading" :style="bodyStyle">
        <el-scrollbar
          style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
        >
          <component
            :is="templateName"
            v-if="templateName"
            :show-header="true"
            :temp="temp"
            :params="params"
            @fetch-entity="callBackEntity"
          />
        </el-scrollbar>
      </div>
    </div>
    <div class="custom-footer" :style="bodyStyle">
      <slot-footer />
    </div>
  </div>
</template>

<script>
import {
  queryEntity as queryOne,
  queryGuestOne
} from '@/api/portal/manager/columnTemp/index';
import { getToken } from '@/utils/auth';
import SlotHeader from './solt/header';
import SlotFooter from './solt/footer';
import Config from '@/settings';
export default {
  name: 'OpenMore',
  components: {
    SlotHeader,
    SlotFooter
  },
  data() {
    return {
      loading: false,
      templateName: null,
      temp: null,
      params: [],
      bodyStyle: {}
    };
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    temp: {
      handler(newName, oldName) {
        console.log(newName);
        if (newName !== null) {
          const path =
            '/' + newName.mbdl + '/' + newName.mbfl + '/more/' + newName.mb;
          const res = () => import(`@/template${path}`);
          this.templateName = res;
          // console.log(this.params)
        }
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },

    themes: {
      handler(val, oldVal) {
        this.$nextTick(() => {
          console.log(val);
          this.bodyStyle.borderRadius = val.bkdx;
          this.bodyStyle.background = val.columnGroundColor;
          this.bodyStyle.color = val.fontColor;
          this.bodyStyle = Object.assign({}, this.bodyStyle);
        });
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.loading = true;
      if (getToken()) {
        queryOne({ id: this.$route.query.temp })
          .then(res => {
            const { data } = res;
            this.temp = data;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        queryGuestOne({ id: this.$route.query.temp })
          .then(res => {
            const { data } = res;
            this.temp = data;
            this.loading = false;
          })
          .catch(() => {
            console.log('查询详情失败！');
            this.loading = false;
          });
      }
    },
    callBackEntity(data) {
      console.log('openMore', data);
      if (Config.EntityOpenType === 3) {
        // 打开新页面
        const temp = data.temp.id;
        const params = data.params;
        const query = { temp: temp };
        if (params !== null && params.length > 0) {
          params.forEach(item => {
            query[item.code] = item.value;
          });
        }
        if (getToken()) {
          const { href } = this.$router.resolve({
            path: '/uc/entity',
            query: query
          });
          window.open(href, '_blank');
        } else {
          const { href } = this.$router.resolve({
            path: '/s/entity',
            query: query
          });
          window.open(href, '_blank');
        }
      }
    }
  }
};
</script>

<style scoped>
.entity-body {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
}
.custom-header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 85px;
  z-index: 100;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.custom-content {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 40px;
  top: 85px;
  background-color: #ffffff;
}
.custom-footer {
  position: fixed;
  left: 0px;
  right: 0px;
  height: 40px;
  bottom: 0px;
  background-color: #00a0e9;
  z-index: 100;
}
.custom-body {
  padding: 0px 55px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
